// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'partials/icons';
@use './variables';
@use './layout';
@use './visibility';

%button-pressed-state {
  box-shadow: inset 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3);
}

%button-base {
  --button-border-color: var(--control-border-color);
  --button-text-color: var(--control-text-color);
  --button-surface-color: var(--control-clickable-surface-color);
  --button-surface-hover-color: var(--control-clickable-surface-focus-color);

  @extend %flex-inline-center;
  gap: var(--control-internal-gap);
  padding: var(--control-padding);

  border: 0;
  color: var(--button-text-color);
  background: var(--button-surface-color);
  line-height: 1.1;
  font-weight: bold;

  &:focus,
  &:hover {
    color: var(--button-text-color); // XXX: needed for when using links as buttons
    background-color: var(--button-surface-hover-color);
  }

  &:active {
    @extend %button-pressed-state;
  }
}

%button-rounded {
  border-radius: var(--control-border-radius);
}

%button-rounded-left {
  border-top-left-radius: var(--control-border-radius);
  border-bottom-left-radius: var(--control-border-radius);
}

%button-rounded-right {
  border-top-right-radius: var(--control-border-radius);
  border-bottom-right-radius: var(--control-border-radius);
}

%button-rounded-top {
  border-top-left-radius: var(--control-border-radius);
  border-top-right-radius: var(--control-border-radius);
}

%button-rounded-bottom {
  border-bottom-left-radius: var(--control-border-radius);
  border-bottom-right-radius: var(--control-border-radius);
}

%button-disabled-state {
  --button-disabled-border-color: var(--control-disabled-border-color);
  --button-disabled-surface-color: var(--control-disabled-clickable-surface-color);
  --button-disabled-text-color: var(--control-disabled-text-color);
  background: var(--buttton-disabled-surface-color);
  color: var(--button-disabled-text-color);
  border-color: var(--button-disabled-border-color);
}

%button {
  @extend %button-base;
  @extend %button-rounded;

  &:disabled {
    @extend %button-disabled-state;
  }
}

%button-alt-state {
  --button-surface-color: var(--control-alt-clickable-surface-color);
  --button-text-color: var(--control-alt-text-color);
  --button-border-color: var(--control-alt-border-color);
  --button-surface-hover-color: var(--control-alt-clickable-surface-focus-color);
}

%button-main-action {
  @extend %button;
  @extend %button-alt-state;
}

%button-clear {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

%button-icon-only {
  @extend %button-clear;
  @extend %flex-inline-center;
  padding: 0;

  span {
    @extend %visually-hidden;
  }
}

%button-clear-icon {
  @extend %button-clear;
  @extend %flex-inline-center;
  min-width: 0;
  padding: 0;

  &::after {
    @extend %icon;
    @extend %icon-cross;
    display: inline-block;
    width: 1em;
    aspect-ratio: 1;
  }

  span {
    @extend %visually-hidden;
  }
}
